<template>
  <div class="policylibrary-analysis">
      <div class="hr10"></div>
      <div class="policylibrary-analysis-left">
        <div class="policylibrary-analysis-title">
          <Row>
            <Col span="12">我的跟踪</Col>
            <Col span="12">
              <Tooltip placement="bottom">
                  <Icon type="ios-help-circle-outline"></Icon>
                  <div slot="content" style="white-space: normal;font-weight:normal;">
                      <p>“我的跟踪”上限为5条政策，若跟踪数量已达上限，可取消跟踪后再进行添加。</p>
                  </div>
              </Tooltip>
            </Col>
          </Row>
        </div>
        <div class="policylibrary-analysis-inner">
          <div class='tagState' v-if="tagState"><Spin size="large"></Spin></div>
          <ul class="ulist-small">
            <li v-for="(item,index) in traceList" :key="index" :class="{active:item.id==currentTypeid}" @click="getTypeTag(item.id)">
              <p >{{item.title}}</p>
              <span class="pubtime">{{item.publishDate}}</span>
              <span class="more"><router-link :to="{path:'detail/type/1/id/'+item.id}">详细</router-link></span>
            </li>
          </ul>
        </div>
      </div>
      <div class="policylibrary-analysis-right">
        <div class="policylibrary-analysis-title">落实情况分析</div>
        <div>
          <Card dis-hover>
            <p slot="title">相关发稿量情况</p>
            <echarts-barsimple :series-data="databarline.value" :xAxisData="databarline.name"></echarts-barsimple>
          </Card>
          <div class="hr20"></div>
          <!--
          <div class="chart-two">            
            <div class="chart-item chart-article">
              <Card dis-hover>
                <p slot="title">发稿类型</p>
                <echarts-pies :seriesData="datapies"></echarts-pies>
              </Card>              
            </div>                        
          </div>
          -->
          <Card dis-hover>
            <p slot="title">关键词云</p>
            <echart-wordclouds :series-data="datawordcloud"></echart-wordclouds>
          </Card>
          <div class="hr20"></div>
          <div class="policylibrary-analysis-stitle">
            <div class="ivu-card-head" style="border:none;"><p>热度排行</p></div>
          </div>
          <Row>
            <Col span="24">
              <Table :columns="columnList" :data="corporateDataList" size="large" :loading="loading"></Table>
              <div style="float: right; margin: 10px">
                <Page 
                :total="total" 
                :current.sync="currentPage" 
                :page-size="pageSize"              
                @on-change="changeLibraryPage" 
                show-total
                show-elevator 
                show-sizer 
                @on-page-size-change="selectPage"
                :page-size-opts="[10,20,50,100]"
                ></Page>
              </div>
            </Col>
          </Row>
        </div>
      </div>
  </div>
</template>

<script>
import Vue from 'vue'
import store from '@/store/index'
import EchartsBarsimple from '@/views/components/echarts/Barsimple'
import EchartWordclouds from '@/views/components/echarts/WordCloud'
import EchartsPies from '@/views/components/echarts/Pie'
Vue.component('EchartsPies', EchartsPies);
Vue.component('EchartsBarsimple', EchartsBarsimple);
Vue.component('EchartWordclouds', EchartWordclouds);
  export default {
    name: "PolicyLibraryAnalysis",
    store,
    components:{
        'echart-wordclouds':EchartWordclouds,
        'echarts-barsimple':EchartsBarsimple,
        'echart-pies':EchartsPies
    },
    data(){
      return{
        policy_library:'PolicyLibraryAnalysis',
        loading:false,
        total:0,
        pageNum:1,
        current:0,
        currentPage:1,
        pageSize:10,
        InformationName:'',
        currentTypeid:0,//我的跟踪默认id
        traceList:[],//我的跟踪列表
        tagState:true,
        columnList:[
          {
            title:'来源',
            key:'type',
            align:'center',
            width:150
          },{
            title:'标题',
            key:'title',
            align:'center',
            render:(h,params)=>{
              return h('div',{
                style:{
                  textAlign:'left'
                }
              },params.row.title)
            },
          },{
            title:'时间',
            key:'publishDate',
            align:'center',
            width:120
          }
        ],
        corporateDataList:[],
        datawordcloud:[{
            name: '产品免检',
            value: 10000
          }, {
              name: '质量免检',
              value: 6181
          }],//关键词云
        databarline:{//相关发稿量情况
          name:['合肥市科技厅','芜湖市科技厅','马鞍山市科技厅','六安市科技厅','黄山市科技厅','铜陵市科技厅','淮南市科技厅'],
          value:[1000,1300,1600,1800,2100,1700,1450]
        },
        datapies:[//发稿类型
          {value:335, name:'通知公告'},
          {value:310, name:'工作动态'},
          {value:234, name:'科技要闻'},
          {value:531, name:'图片视频'},
          {value:178, name:'其它'}
        ]

      }
    },
    components:{
        
    },
    methods:{
      getTypeTag(id){
        this.currentTypeid=id;
      },
      //获取我的跟踪
      getmyData(){
        let url=this.$url.baseUrl+'/consulting-library/api/policy/policy?follow=1&pageSize=5&pageNum=1';
        this.$http.get(url).then(response =>{
            let result=response.data
            if (result.meta.success){
              this.tagState=false;
              this.currentTypeid=result.data.list[0].id;//第1个的id
              this.traceList=result.data.list;
            }else {
              console.log("获取数据失败")
            }
        })
      },
      //获取数据
      getpolicyData(){
        if (this.loading) return; // 避免多次请求
        this.loading = true;
        let currentTypeid=this.currentTypeid;
        let url=this.$url.baseUrl+'/consulting-library/api/policy/implement';
        this.$http.get(url,{
          params:{
            policyId:currentTypeid,
            pageSize:this.pageSize,
            pageNum:this.pageNum
          }
        }).then(response =>{
            let result=response.data
            if (result.meta.success){
              //console.log(result.data);
              this.loading = false;
              this.corporateDataList=result.data.list;
              this.total=result.data.total;
            }else {
              console.log("获取数据失败")
            }
        })
      },
      changeLibraryPage(index){
        this.pageNum=index
        this.getpolicyData();
      },
      selectPage(index){
        this.pageSize=index;
        this.getpolicyData();
        console.log(index,'this.pageSize');
      },
      getbarLineData(){//获取发稿情况
        let currentTypeid=this.currentTypeid;
        let url=this.$url.baseUrl+'/consulting-library/api/policy/implement/countSite';
        this.$http.get(url,{
          params:{
            policyId:currentTypeid
          }
        }).then(response =>{
            let result=response.data; 
            //this.databarline=result;
            let databarline={
              name:[],
              value:[]
            };
            result.forEach(function(item,index){
              databarline.name.push(item.name);
              databarline.value.push(item.value);
            })
            this.databarline=databarline;
            //console.log(this.databarline,'获取发稿情况');
        })
      },
      getpieData(){//获取发稿类型
        let currentTypeid=this.currentTypeid;
      },
      getwordsData(){//获取关键词云
        let currentTypeid=this.currentTypeid;
        let url=this.$url.baseUrl+'/consulting-library/api/policy/implement/keywords';
        this.$http.get(url,{
          params:{
            policyId:currentTypeid
          }
        }).then(response =>{
            let datawordcloud=[];
            response.data.forEach(function(item,index){
              datawordcloud[index]={
                name:item,
                value:1000
              }
            });
            this.datawordcloud=datawordcloud;
        })
      }
    },
    mounted() {
      this.$store.state.hidemenu=true;//显示菜单项
      this.$store.state.submenuname='PolicyLibraryAnalysis';//选中
      this.getmyData();   
    },
    watch:{
      currentTypeid(){
        //console.log(this.currentTypeid,'this.currentTypeid');
        this.getTypeTag(this.currentTypeid);        
        this.getpolicyData();
        this.getbarLineData();
        this.getwordsData();
      }
    },
    computed:{
    },
    created(){      
    },
    filters: {
      formatDate: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        return y + '-' + MM + '-' + d;
      }
    }

  }
</script>
<style>
.ivu-tooltip-inner{
    min-width:250px;
}
</style>

<style rel="stylesheet/less" lang="less" scoped>
.displayflex(){
  -webkit-display: flex;
  -moz-display: flex;
  display: flex;
}
.flexdiv(){
  -webkit-flex:1;
  -moz-flex:1;
  flex:1;
}
.hr10{
  height: 10px;
  line-height: 0;
  font-size: 0;
}
.hr20{
  height: 20px;
  line-height: 0;
  font-size: 0;
}
li{
    list-style: none;
    margin:0;
    padding:0;
}
.policylibrary-analysis{
  width: 100%;
  .displayflex();
}
.policylibrary-analysis-left{
  width:200px;
  margin-right: 15px;
  .ivu-tooltip{
    float:right;
  }  
}
.policylibrary-analysis-title{
  font-size: 16px;
  line-height: 40px;
  font-weight: 700;
}
.policylibrary-analysis-stitle{
  border:1px solid #e8eaec;
  border-bottom:none;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.policylibrary-analysis-inner{
  border:1px solid #e8eaec;
  border-radius: 4px;
  padding:5px;
  .tagState{width:32px;margin:0 auto;}
  .ulist-small{
    li{
      border-bottom:1px solid #e8eaec;
      line-height: 20px;
      padding:5px;
      margin:0px 0;
      cursor: pointer;
      &.active{
        background-color: #dcdee2;
      }
      &:last-child{
        border-bottom:none;
      }
      p {
        text-align: justify;
        margin-bottom:5px;
        a{
          color: #222222;
        }
      }
      span.pubtime{
        color:#999999;
      }
      span.more{
        float:right;
        font-size:12px;
      }
    }
  }
}
.policylibrary-analysis-right{
  .flexdiv();
  .policylibrary-analysis-inner{
    padding:12px;
  }
}
.chart-two{
  .displayflex();
  margin-left:-20px;
  .chart-item{
    .flexdiv();
    margin-left:20px;
  }
}
.ulist{
  li{
    line-height: 35px;
    height: 35px;
    overflow: hidden;
    font-size:14px;
    .displayflex();
    a{
      color: #222222;
      display: inline-block;
    }
    span{
      color:#999999;
      width: 100px;
      padding-right: 5px;
      text-align: right;
      margin-left: auto;
      display: inline-block;
    }
  }
}
</style>
